<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <my-input v-model="inputText"></my-input>
    <!--
    上面的写法等同于下面的写法
    <my-input :modelValue="inputText" @update:modelValue="value => inputText =
value"></my-input>
-->
    <div>输入的内容：{{inputText}}</div>
    <button @click="this.inputText = ''">清空</button>
  </div>

<script>
  const {createApp,ref} = Vue
  const app = createApp({
    setup() {
      const inputText = ref("")
      return {inputText}
    }
  })
  const inputComponent = {
    /*
       自定义组件要支持双向数据绑定，只需要做两件事：
       1、把内部可输入元素的值绑定到modelValue属性上
       2、当内部元素的值发生变化时，触发update:modelValue自定义事件，并把改变后的数据传递出去

       可以这样理解，所有支持v-model指令的组件默认都会提供一个名为modelValue的属性，
       而组件内部的内容发生变化后会触发update:modelValue事件，并把改变后的数据传递出去。
    */
    props: ['modelValue'],
    emits: ['update:modelValue'],
    setup(props,ctx) {
      const action = (event) => {
        ctx.emit('update:modelValue',event.target.value)
      }
      return {action}
    },
    template: `<div>
      <span>输入框：</span><input :value="modelValue" @input="action"/>
    </div>`
  }
  app.component('my-input',inputComponent)
  app.mount('#app')
</script>
</body>
</html>